.ulList{
  list-style: none;
  display: inline-block;
  margin: 1%;
  padding: 0;
  li{
    font-family: @defaultFontFamily;
    float: left;
    text-align: center;
    span{
      display: block;
      padding: 5px 20px;
      text-decoration: none;
      background: @btnBg;
      margin: 2px;
      color: @white;
      cursor: pointer;
      &.active{
        background: @fontBlueClor;
      }
    }
  }
}
.control:hover {
  background: @fontBlueClor;
}
.control[data-filter]:after {
  position: absolute;
  width: 10px;
  height: 10px;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  border: 2px solid currentColor;
  border-radius: 2px;
  background: currentColor;
  .transition(background-color 150ms);
  .transition(border-color 150ms);
}

.mixitup-control-active {
  background: @fontBlueClor;
}

.mixitup-control-active[data-filter]:after {
  background: transparent;
}
.mix{
  width: 31%;
  margin: 1%;
  float: left;
  overflow: hidden;
  .portfolio-wrapper{
    position: relative !important;
    overflow: hidden;
    background:@bgColor;
    cursor: pointer;
  }
  img{
    width: 100%;
    position: relative;
  }
  .label{
    position: absolute;
    width: 100%;
    height: 40px;
    display: block !important;
    bottom:-40px;
    .label-text {
      color:@white;
      position: relative;
      z-index:500;
      padding:5px 8px;
      font-weight:300;
      a{
        text-decoration: none;
      }
      .text-title {
        display:block;
        font-size:13px;
        margin: 1px;
        color : @white;
        text-transform:capitalize;
      }
    }
    .label-bg {
      width: 100%;
      height:100%;
      position: absolute;
      top:0;
      left:0;
      background: @fontBlueClor;
      .transition(all .3s ease-in);
    }
  }
}